<!-- 商品管理表格 -->
<template>
  <div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :default-sort="{ prop: 'rank', order: 'descending' }"
      @sort-change="sortChange"
    >
      <el-table-column
        v-loading="loading"
        align="center"
        label="ID"
        width="45"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="商品图" width="95">
        <template slot-scope="scope">
          <img
            :src="scope.row.image_uri"
            alt
            style="width: 50px; height: 50px;"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="商品名称">
        <template slot-scope="{ row }">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column width="90px" align="center" label="商品售价">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>

      <el-table-column width="90px" label="销量">
        <template slot-scope="scope">
          <span>{{ scope.row.volume }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="库存" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.repertory }}</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="排序"
        width="90"
        sortable
        prop="rank"
      />
      <el-table-column class-name="status-col" label="状态" width="110">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            active-color="#1890ff"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="操作时间">
        <template slot-scope="scope">
          <span>
            {{ scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}") }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{ row }">
          <div style="fontSize: 12px;">
            <span
              style="margin: 5px; color: #1890ff; cursor: pointer;"
              @click="handleRedact(row)"
              >编辑</span
            >
            <span
              style="margin: 5px; color: #1890ff; cursor: pointer;"
              @click="handleShowAddRecycle(row)"
              >加入回收站</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; display: flex;  justify-content: space-between;">
      <span />
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <DirlogFunctionality
      ref="dirlog"
      :flag="isShow"
      :type="distinguishType"
      @handleCancel="handleCancel"
      @handleNotarize="handleNotarize"
    />
    <RecycleDirlog
      :flag="recyleIsShow"
      :list="deleteList"
      @handleCancel="handleRecycleCancel"
      @handleAddList="handleAddList"
      @handleDleList="handleDleList"
      @handleRedact="handleRedact"
      @handleRecycle="handleRecycle"
    />
  </div>
</template>

<script>
import { fetchList } from "@/api/productData";
import DirlogFunctionality from "./DirlogFunctionality";
import RecycleDirlog from "./RecycleDirlog";

export default {
  components: {
    DirlogFunctionality,
    RecycleDirlog
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  props: {
    type: {
      type: String,
      default: "CN"
    }
  },
  data() {
    return {
      list: [], // 数据容器
      // 请求数据需要传入的初始数据
      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: "+id",
        total: 0
      },
      loading: false,
      isShow: false, // 弹框开关
      recyleIsShow: false, //回收站开关
      distinguishType: "addRecycle", // 区别修改和加入回收站开关
      tableItem: {}, // 储存每一项的容器
      data: [], //出售商品容器
      datas: [], //仓库中的商品容器
      newDatas: [], //已经售馨的商品容器
      deleteList: [], // 回收站数据容器
      newData: [] //模糊筛选容器
    };
  },
  created() {
    this.getList(); // 调用获取数据函数
  },
  methods: {
    // 初始获取数据
    getList() {
      this.loading = true;
      this.$emit("create"); // for test
      fetchList(this.listQuery).then(res => {
        if (res.code === 20000) {
          this.newData = res.data.items;
          this.data = res.data.items.filter(item => item.type === "CN");
          this.datas = res.data.items.filter(item => item.type === "US");
          this.newDatas = res.data.items.filter(item => item.type === "JP");
          if (this.type === "CN") {
            this.list = this.data;
          } else if (this.type === "US") {
            this.list = this.datas;
          } else if (this.type === "JP") {
            this.list = this.newDatas;
          }
          this.listQuery.total = res.data.total;
        }
      });
    },
    // 排序
    sortChange(column, prop, order) {
      const data = this.list.sort((a, b) => {
        if (column.order === "ascending") {
          return a.rank - b.rank;
        } else {
          return b.rank - a.rank;
        }
      });
      this.list = data;
    },
    // 每页显示几条
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    // 页数切换
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    // 模糊搜索
    handleOnSearch(val) {
      if (val !== "") {
        const data = this.newData.filter(
          item =>
            item.title.includes(val) ||
            item.display_time.includes(val) ||
            item.id.includes(val) ||
            item.price.toString().includes(val) ||
            item.volume.toString().includes(val) ||
            item.repertory.toString().includes(val) ||
            item.rank.toString().includes(val)
        );
        this.list = data;
        this.listQuery.total = data.length;
      }
    },
    // 加入回收站显示弹框
    handleShowAddRecycle(val) {
      this.isShow = true;
      this.distinguishType = "addRecycle";
      this.tableItem = val;
    },
    // 编辑显示弹框
    handleRedact(val) {
      this.isShow = true;
      this.distinguishType = "redact";
      this.tableItem = val;
      this.$refs.dirlog.handleSetForm(val);
    },
    //回收站编辑显示弹框
    handleRecycle(val) {
      this.isShow = true;
      this.distinguishType = "recycle";
      this.tableItem = val;
      this.$refs.dirlog.handleSetForm(val);
      this.recyleIsShow = false;
    },
    // 取消事件 公共弹框消失
    handleCancel() {
      this.isShow = false;
      if (this.distinguishType === "recycle") {
        this.recyleIsShow = true;
      }
    },
    // 确定事件
    handleNotarize(val) {
      // 加入回收站
      if (this.distinguishType === "addRecycle") {
        if (this.type === "CN") {
          this.data = this.list.filter(item => item.id !== this.tableItem.id);
          this.list = this.data;
        } else if (this.type === "US") {
          this.datas = this.list.filter(item => item.id !== this.tableItem.id);
          this.list = this.datas;
        } else if (this.type === "JP") {
          this.newData = this.list.filter(
            item => item.id !== this.tableItem.id
          );
          this.list = this.newData;
        }
        this.deleteList.unshift(this.tableItem);
      } else if (this.distinguishType === "redact") {
        //编辑
        this.list.forEach(item => {
          if (item.id === this.tableItem.id) {
            item = { ...item, ...val };
          }
        });
      } else if (this.distinguishType === "recycle") {
        //回收站里的编辑
        this.deleteList.forEach(item => {
          if (item.id === this.tableItem.id) {
            item = { ...item, ...val };
          }
        });
        this.recyleIsShow = true;
      }
      this.isShow = false;
    },
    // 回收站显示
    handleRecycleBlock() {
      this.recyleIsShow = true;
    },
    // 隐藏回收站显示
    handleRecycleCancel() {
      this.recyleIsShow = false;
    },
    // 恢复商品
    handleAddList(val) {
      const data = this.deleteList.filter(item => item.id !== val.id);
      this.deleteList = data;
      this.list.unshift(val);
    },
    // 删除商品
    handleDleList(val) {
      const data = this.deleteList.filter(item => item.id !== val.id);
      this.deleteList = data;
    },
    //分类
    handleTabType(key) {
      this.handleOnSearch(val);
    }
  }
};
</script>
